<template>
	<view class="main-box">
		<view class="current-time-line" v-show="showCurrentTimeLine"
		 :style="{top:currentLineTop+'rpx'}"></view>
		
		<!-- 左侧时间段 -->
		<view class="left-box">
			<view class="logo-box">
				<image class="logo" src="../static/home/ic_table_logo.png"></image>
				<view class="bottom-line"></view>
				<view class="right-line-3"></view>
			</view>
			<view class="single-time-box" v-for="(timeItem , timeIndex) in timeList" :key="timeIndex">
				<text class="font-333-24 font-weight-600">{{timeItem}}</text>
				<view class="bottom-line"></view>
				<view class="right-line-3"></view>
			</view>
		</view>
		<view class="column-container"
		 style="overflow-x: auto;width: calc(100% - 125rpx);overflow-y: hidden;">
			<!-- 右侧顶部 -->
			<view class="row-container">
				<view class="column-container" v-for="(dateItem , dateIndex) in dateList" 
				:key="dateIndex">
					<view class="row-container-center height-90" 
					style="position: relative;flex-shrink: 0;" :class="{'bg-white' : dateIndex % 2 == 1}">
						<text class="font-333-30 font-weight-600" >{{dateItem.showTime}}</text>
						<text class="font-666-28 ml-2" v-if="dateItem.bedList.length > 1">{{dateItem.week}}</text>
						<view class="bottom-line"></view>
						<view class="right-line-3"></view>
					</view>
					<view class="row-container" :class="{'bg-white' : dateIndex % 2 == 1}" 
					style="flex-shrink: 0;">
						<view class="bed-item" v-for="(bedItem , bedIndex) in dateItem.bedList" 
						:key="bedIndex">
							<text class="font-333-24 font-weight-600 font-line-2">{{bedItem.deviceName}}</text>
							<view class="right-line-3" v-if="bedIndex == dateItem.bedList.length - 1"></view>
							<view class="right-line" v-else></view>
							<view class="bottom-line"></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="row-container">
				<view class="row-container" v-for="(dateItem , dateIndex) in dateList" :key="dateIndex">
					<view class="column-box" v-for="(bedItem , bedIndex) in dateItem.bedList" :key="bedIndex"
						:style="{height:columnHeight}"
					 >
					 
						<view class="single-cell" v-for="(cellItem , cellIndex) in timeList" :key="cellIndex">
							<view class="right-line-3" v-if="bedIndex == dateItem.bedList.length - 1"></view>
							<view class="right-line" v-else></view>
							<view class="bottom-line"></view>
						</view>
						
						<view  v-for="(userItem , userIndex) in bedItem.customList" :key="userIndex"
						:class="{'chosen-blue' : userItem.sex == 1 , 
						'chosen-red' : userItem.sex == 0 , 'chosen-green' : userItem.sex == 2}"
						:style="{'marginTop' : userItem.marginMin + 'rpx' , 
						'height' : userItem.lastMin + 'rpx'}" @click="handleClickUserItem(userItem)">
							<image class="check-arrive"
							src="../static/home/ic_check_arrival.png" v-if="userItem.status == 1"></image>
							
							<text class="font-fff-26 font-weight-600" v-if="userItem.sex == 2">{{userItem.realName}}</text>
							<text class="chosen-text" v-if="userItem.sex != 2 && userItem.lastMin >= 120">{{userItem.realName}}</text>
							<text class="chosen-text" v-if="userItem.sex != 2 && userItem.lastMin < 120 ">{{userItem.realName.substring(0,1)}}</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		
		
	</view>
</template>

<script>
	export default {
		name:"appointmentTable",
		data() {
			return {
				timeList:[],
				starHour:'' , // 店铺营业开始时间小时
				endHour:'' ,  //店铺营业结束时间 小时
				dateList:[],
				
				currentTimer:null,
				currentLineTop:0,
				showCurrentTimeLine:false
			};
		},
		
		computed:{
			columnHeight(){
				return this.timeList.length * 96 + "rpx"
			}
		},
		
		methods:{
			caculateCurrentTimeLine(){
				if (!this.starHour || !this.endHour) return
				let nowDate = new Date()
				let hours = nowDate.getHours()
				let min = nowDate.getMinutes()
				this.showCurrentTimeLine = hours < this.endHour && hours >= this.starHour
				
				if (this.showCurrentTimeLine){
					let leftHour = hours - parseInt(this.starHour)
					this.currentLineTop = parseInt(leftHour * 96 + min * 1.6) + 155
				} else{
					this.currentLineTop = 0
				}
				console.log('currentLineTop----' , this.currentLineTop)
			},
			
			handleInitTime(shopStartTime , shopEndTime){
				this.timeList = []
				this.starHour = parseInt(shopStartTime.split(":")[0])
				this.endHour = parseInt(shopEndTime.split(":")[0])
				let addHour = this.starHour
				while (addHour <= this.endHour){
					if (addHour<10){
						this.timeList.push("0" + addHour + ":00")
					} else{
						this.timeList.push(addHour + ":00")
					}
					addHour++
				}
				this.caculateCurrentTimeLine()
				this.startCurrentTimer()
			},
			
			stopCurrentTimer(){
				clearInterval(this.currentTimer)
				this.currentTimer = null
			},
			
			startCurrentTimer(){
				let that = this
				if (this.currentTimer){
					clearInterval(this.currentTimer)
					this.currentTimer = null
				}
				this.currentTimer = setInterval(()=>{
					that.caculateCurrentTimeLine()
				} , 60000)
			},
			
			handleClickUserItem(item){
				uni.$emit('clickUserItem' , item)
			},
			
			handleAppointmentData(data){
				if (data){
					data.forEach((dataItem)=>{
						if (dataItem.bedList && dataItem.bedList.length > 0){
							dataItem.bedList.forEach((bedItem)=>{
								if (bedItem.customList && bedItem.customList.length > 0){
									
									let lastCostomer = null  // 上一条数据
									bedItem.customList.forEach((customItem)=>{
										let startHour = parseInt(customItem.startTime.split(':')[0])
										let startMin = parseInt(customItem.startTime.split(":")[1])
										
										let endHour = parseInt(customItem.endTime.split(':')[0])
										let endMin = parseInt(customItem.endTime.split(":")[1])
										
										let margin = (startHour - this.starHour) * 96 + 18 + startMin
										
										if (lastCostomer && lastCostomer.endTime == customItem.startTime){
											margin += 3
										}
										
										lastCostomer = customItem
										
										this.$set(customItem , "marginMin" , margin)
										
										let lastMin = 0
										let lastHour = endHour - startHour
										if (endHour < startHour){
											lastMin = (lastHour - 1) * 96 + (endMin + 60 - startMin)
										} else{
											lastMin = lastHour * 96 + (endMin - startMin)
										}
										
										if (endMin == 0){
											lastMin -= 36
										}
										
										this.$set(customItem , "lastMin" , lastMin)
										
									})
								}
							})
						}
					})
					
					this.dateList = data
					console.log('dataList---' , this.dateList)
					
				}
				
				
			}
		}
		
	}
</script>

<style lang="scss">
	.main-box{
		display: flex;
		flex-direction: row;
		position: relative;
		width: 100%;
		height: auto;
		overflow-x: hidden;
		overflow-y: auto;
		background: #F5F5F5;
		z-index: 50;
		
		.current-time-line{
			background: #1DCB8C;
			width: 100%;
			height: 2rpx;
			position: absolute;
			z-index: 1000;
		}
		
		.logo-box{
			width: 125rpx;
			height: 155rpx;
			background: white;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			position: relative;
			
			.logo{
				width: 67rpx;
				height: 85rpx;
			}
		}
		
		.single-time-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 125rpx;
			height: 96rpx;
			position: relative;
			flex-shrink: 0;
		}
		
	}
	
	.left-box{
		display: flex;
		flex-direction: column;
		width: 125rpx;
		background: #F5F5F5;
		flex-shrink: 0;
	}
	
	.right-line-3{
		width: 3rpx;
		height: 100%;
		background: #aaaaaa;
		position: absolute;
		right: 0;
	}
	
	.right-line{
		width: 1rpx;
		height: 100%;
		background: #DADADA;
		position: absolute;
		right: 0;
	}
	
	.bottom-line{
		width: 100%;
		height: 1rpx;
		background: #DADADA;
		position: absolute;
		bottom: 0;
	}
	
	.bed-item{
		width: 140rpx;
		height: 65rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.single-cell{
		width: 140rpx;
		height: 96rpx;
		background: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-shrink: 0;
		
		.chosen-red{
			width: 94rpx;
			height: 60rpx;
			background: #FF9595;
			border-radius: 10rpx;
		}
	}
	
	.column-box{
		display: flex;
		flex-direction: column;
		width: 140rpx;
		height: auto;
		position: relative;
		align-items: center;
		background: white;
		
		.chosen-red{
			width: 94rpx;
			height: auto;
			background: #FF9595;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			position: absolute;
		}
		
		.chosen-blue{
			width: 94rpx;
			height: auto;
			background: #529CF3;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			position: absolute;
		}
		
		.chosen-green{
			width: 94rpx;
			height: auto;
			background: #47D2A0;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			position: absolute;
		}
		
		.chosen-text{
			color: white;
			font-size: 26rpx;
			font-weight: bold;
			text-align: center;
			writing-mode: vertical-rl;
		}
		
		.check-arrive{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 100;
		}
		
		
	}
	
</style>